<template>
  <div
    class="backgroundBox"
    v-loading="loading"
    element-loading-text="加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0,0,0,0.3)"
  >
    <div class="topDiv">
      <!-- 标题头 -->
      <div class="header">
        <span
          style="
            display: flex;
            align-items: center;
            font-size: 18px;
            padding-bottom: 6px;
          "
        >
          <img
            src="@/assets/img/mbxq.png"
            style="height: 20px; width: 20px; margin-right: 5px"
          />
          模版详情
        </span>
      </div>
      <el-scrollbar style="height: 850px">
        <el-empty
          :image-size="200"
          description="暂无结算"
          v-show="boxList.length <= 0"
        ></el-empty>
        <div class="topDivMiniBox" v-show="boxList.length > 0">

          <div class="ddbox" v-for="(item, index) in boxList" :key="index" v-show="item.projectSettleEntityList.length > 0">
            <el-scrollbar style="height: 100%">
              <div class="nameBox">
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 20px;
                  "
                >
                  <div
                    style="
                      height: 46px;
                      width: 46px;
                      border-radius: 50%;
                      background: #fff7f2;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <img
                      :src="item.imgUrl"
                      alt=""
                      class="txBox"
                      style="width: 22px; height: 22px; margin-left: 10px"
                    />
                  </div>
                  <span style="margin-left: 5px; font-weight: bold;">{{ item.projectName }}</span>
                </div>

                <div
                  v-if="userName == '租户'"
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 20px;
                  "
                >
                  <span
                    style="
                      cursor: pointer;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                    v-show="item.isLevel == 1"
                  >
                    <el-button
                      type="text"
                      @click="settlementMoneyeditButton(item)"
                      style="margin-right: 10px; text-decoration: underline"
                      >设置</el-button
                    >
                    <img
                      src="@/assets/img/hk.png"
                      alt=""
                      style="height: 15px"
                      @click="isDefaultInput(item)"
                    />
                  </span>
                  <span
                    v-show="item.isLevel == 0"
                    style="
                      cursor: pointer;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <div
                      style="
                        font-size: 14px;
                        margin-right: 5px;
                      "
                    >
                    <span style="font-weight:0px;font-size: 14px;color:rgb(177, 175, 178);margin-right:5px">层级结算</span>
                    </div>
                    <img
                      src="@/assets/img/hk2.png"
                      alt=""
                      style="height: 15px"
                      @click="isDefaultInput(item)"
                    />
                  </span>
                </div>
              </div>
              <div class="xtys"></div>
              <!-- <el-empty
                style="margin-top:40px"
                :image-size="70"
                description="暂无结算"
                v-show="item.projectSettleEntityList.length <= 0"
              ></el-empty> -->

              <div v-show="userName == '租户'">
                <div v-show="item.isLevel == 0">
                  <el-form
                    v-show="item.projectSettleEntityList.length > 0"
                    :model="item"
                    size="medium"
                    label-width="100px"
                    v-for="(item3, index3) in item.projectSettleEntityList"
                    :key="index3"
                     
                  >
                    <el-form-item
                      label="结算名称"
                      prop="field104"
                      class="jsName"
                      style="margin: 9px 0px;"
                    >
                      <span style="color: #4d7cf1;margin-left:10px">{{
                        item3.cpaProjectSettle.settleName
                      }}</span>
                    </el-form-item>

                    <el-form-item
                      label="佣金成本"
                      prop="field104"
                       class="jsName"
                      style="margin: 9px 0px"
                    >
                      <span
                        style="color: #4d7cf1; font-size: 25px;margin-left:10px"
                        v-show="userName == '租户'"
                        >∞</span
                      >
                      <span
                        style="color: #4d7cf1;margin-left:10px"
                        v-show="userName == '用户'"
                        >{{ item3.settleMax }}</span
                      >
                      <!-- <span style="color: #4d7cf1;" v-show="userName == '用户'">222</span> -->
                    </el-form-item>
                    <!-- 条件单选框 -->
                    <!-- <el-form-item label="" prop="field101">
          <el-radio-group v-model="paramList.field101" size="medium">
            <el-radio
              v-for="(item3, index3) in field107Options"
              :key="index3"
              :label="item3.value"
              >{{ item3.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item> -->

                    <el-form-item
                      label="结算金额"
                      prop="field102"
                      v-show="paramList.field101 == 1"
                      style="margin: 9px 0px"
                    >
                      <el-input
                        @change="projectButton(item, item3)"
                        v-model.trim="
                          item3.cpaCommissionTemplateDetails.settlePrice
                        "
                        v-if="userName != '用户'"
                        placeholder="请输入金额"
                        clearable
                        maxlength="4"
                        type="text"
                        class="moneyBox"
                        :style="{ width: '90%' }"
                        onkeyup="this.value=this.value.replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                      />
                      <el-input
                        v-else
                        @change="projectButton(item, item3)"
                        v-model.trim="
                          item3.cpaCommissionTemplateDetails.settlePrice
                        "
                        :disabled="item.isLevel == 1"
                        placeholder="请输入金额222"
                        clearable
                        maxlength="4"
                        type="text"
                        class="moneyBox"
                        :style="{ width: '90%' }"
                        onkeyup="this.value=this.value.replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                      />
                    </el-form-item>

                    <el-form-item
                      label="条件模板"
                      prop="field103"
                      v-show="paramList.field101 != 1"
                    >
                      <el-select
                        v-model="paramList.field103"
                        placeholder="请选择有条件模板"
                        clearable
                        @change="conditionShow(item.field103)"
                        :style="{ width: '100%' }"
                      >
                        <el-option
                          v-for="(item4, index4) in field109Options"
                          :key="index4"
                          :label="item4.label"
                          :value="item4.value"
                          style="margin: 5px 0px"
                        >
                          <span style="float: left">{{ item4.label }}</span>
                          <span
                            style="
                              float: right;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            ><el-button
                              type="primary"
                              size="small"
                              @click="editButton(item4, index4)"
                              >编辑</el-button
                            ></span
                          >
                        </el-option>
                        <!-- <el-option
              v-for="(item, index) in field109Options"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option> -->
                      </el-select>
                    </el-form-item>
                    <div class="xhxBox_mini"></div>
                  </el-form>
                </div>

                <div v-show="item.isLevel == 1" class="cjjsBox">
                  层级结算
                </div>
              </div>

              <div v-show="userName != '租户'">
                <div>
                  <el-form
                    v-show="item.projectSettleEntityList.length > 0"
                    :model="item"
                    size="medium"
                    label-width="100px"
                    v-for="(item3, index3) in item.projectSettleEntityList"
                    :key="index3"
                  >
                    <el-form-item
                      label="结算名称"
                      prop="field104"
                       class="jsName"
                      style="margin: 9px 0px;"
                    >
                      <span style="color: #4d7cf1;margin-left:10px">{{
                        item3.cpaProjectSettle.settleName
                      }}</span>
                    </el-form-item>

                    <el-form-item
                      label="佣金成本"
                      prop="field104"
                       class="jsName"
                      style="margin: 9px 0px"
                    >
                      <span
                        style="color: #4d7cf1; font-size: 25px;margin-left:10px"
                        v-show="userName == '租户'"
                        >∞</span
                      >
                      <span
                        style="color: #4d7cf1;margin-left:10px"
                        v-show="userName == '用户'"
                        >{{ item3.settleMax }}</span
                      >
                      <!-- <span style="color: #4d7cf1;" v-show="userName == '用户'">222</span> -->
                    </el-form-item>
                    <!-- 条件单选框 -->
                    <!-- <el-form-item label="" prop="field101">
          <el-radio-group v-model="paramList.field101" size="medium">
            <el-radio
              v-for="(item3, index3) in field107Options"
              :key="index3"
              :label="item3.value"
              >{{ item3.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item> -->

                    <el-form-item
                      label="结算金额"
                      prop="field102"
                      v-show="paramList.field101 == 1"
                      style="margin: 9px 0px"
                    >
                      <el-input
                        @change="projectButton(item, item3)"
                        v-model.trim="
                          item3.cpaCommissionTemplateDetails.settlePrice
                        "
                        v-if="userName != '用户'"
                        placeholder="请输入金额"
                        clearable
                        maxlength="4"
                        type="text"
                        class="moneyBox"
                        :style="{ width: '90%' }"
                        :disabled='item.isLevel == 1'
                        onkeyup="this.value=this.value.replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                      />
                      <el-input
                        v-else
                        @change="projectButton(item, item3)"
                        v-model.trim="
                          item3.cpaCommissionTemplateDetails.settlePrice
                        "
                        :disabled="item.isLevel == 1"
                        placeholder="请输入金额222"
                        clearable
                        maxlength="4"
                        type="text"
                        class="moneyBox"
                        :style="{ width: '90%' }"
                        onkeyup="this.value=this.value.replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                      />
                    </el-form-item>

                    <el-form-item
                      label="条件模板"
                      prop="field103"
                      v-show="paramList.field101 != 1"
                    >
                      <el-select
                        v-model="paramList.field103"
                        placeholder="请选择有条件模板"
                        clearable
                        @change="conditionShow(item.field103)"
                        :style="{ width: '100%' }"
                      >
                        <el-option
                          v-for="(item4, index4) in field109Options"
                          :key="index4"
                          :label="item4.label"
                          :value="item4.value"
                          style="margin: 5px 0px"
                        >
                          <span style="float: left">{{ item4.label }}</span>
                          <span
                            style="
                              float: right;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            ><el-button
                              type="primary"
                              size="small"
                              @click="editButton(item4, index4)"
                              >编辑</el-button
                            ></span
                          >
                        </el-option>
                        <!-- <el-option
              v-for="(item, index) in field109Options"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option> -->
                      </el-select>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </el-scrollbar>
            <!-- <div style="display: flex">
          <el-button
            type="primary"
            @click="projectButton(item)"
            style="margin: 0px auto"
            >提交</el-button
          >
        </div> -->
          </div>
        </div>
      </el-scrollbar>
      <!-- 分页插件 -->
      <pagination
        :total="total"
        style="margin: 40px 0px"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import {
  addTemplate,
  listAPI,
  proUserList,
  getBasisList,
  addDetails,
  getDetails,
  addMoney,
  modifyMoney,
  getTemplateDetails,
  enabledLevel,
  disabledLevel,
} from "@/api/projectManagement/index.js";
import { getIdentityAndTopId } from "@/api/login.js";
export default {
  data() {
    return {
      total: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: true,
      boxList: [
        // {
        //   // proId: 30,
        //   // proName: "测试汇总",
        //   two: [
        //     { projectId: 26, settleName: "111" },
        //     { projectId: 26, settleName: "222" },
        //   ],
        // },
        // { proId: 21, proName: "大张伟" },
      ],

      paramList: {
        field101: 1,
        field102: undefined,
        field103: undefined,
        field104: "T1",
      },
      field109Options: [
        {
          label: "创建条件模板",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      field107Options: [
        {
          label: "无条件",
          value: 1,
        },
        {
          label: "有条件",
          value: 2,
        },
      ],

      userId: "",
      //租户还是用户
      userName: "",
    };
  },
  async created() {},
  async mounted() {
    this.userId = sessionStorage.getItem("userID") - 0;
    //获取是租户还是用户还是平台
    const { data } = await getIdentityAndTopId();
    console.log(data, "用户信息平台还是租户");
    this.userName = data.identity;
    this.Template();
  },
  methods: {
    async Template() {
      let param = {
        templateId: this.$route.query.templateId - 0,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      };
      const data = await getTemplateDetails(param);
      if (data.code == 200) {
        //如果为null那么就会报错,把null赋值为空对象
        data.data.templateDetailsEntityList.forEach((item) => {
          item.projectSettleEntityList.forEach((item2) => {
            if (!item2.cpaCommissionTemplateDetails) {
              item2.cpaCommissionTemplateDetails = {
                id: "",
                projectId: "",
                settleId: "",
                settlePrice: "",
                templateId: "",
              };
            }
          });
        });
        // this.boxList = [
        //   {
        //     projectName: "测试项目",
        //     imgUrl:"http://mao.91weiduan.cn/upload/2021/11/24/41f8a756dc33f8f850e595c95a2402d7.jpg",
        //     projectId: 11,
        //     projectSettleEntityList: [
        //       {
        //         cpaProjectSettle: {
        //           id: 25,
        //           projectId: 11,
        //           settleName: "结算1",
        //           settleColumn: "result_ea2903",
        //         },
        //         cpaCommissionTemplateDetails: null,
        //         settleMax: 10,
        //       },
        //     ],
        //   },
        // ];
        this.boxList = data.data.templateDetailsEntityList;
        this.total = data.data.total;
        console.log(this.boxList, "最后");
        this.loading = false;
      }
    },
    //废弃了
    async getList() {
      let param = {};
      if (this.userName == "租户") {
        param = {
          pageSize: 100,
          pageNum: 1,
          userId: this.userId,
        };
        const data = await listAPI(param);
        console.log(data.data.list, "11111");
        if (data.code == 200) {
          data.data.list.forEach(async (item, index) => {
            const getList = await getBasisList({
              projectId: item.proId,
            });
            if (getList.code == 200) {
              getList.data.forEach((item2) => {
                item2.judge = "新增";
                item2.settlePrice = 0;
              });
              item.two = getList.data;
            }
          });
          const money = await getDetails({
            // projectId: this.$route.query.projectId - 0,
            templateId: this.$route.query.templateId - 0,
          });
          console.log(money, "获取金额");
          if (money.code == 200) {
            if (money.data.length > 0) {
              money.data.forEach((item) => {
                console.log("5");
                data.data.list.forEach((item2) => {
                  console.log("6");
                  console.log(item2, "7");
                  if (item2.two != "null" || item2.two.length != 0) {
                    //因为有的是空数据，不做这一步判断，容易卡在空数组里面出不来。
                    //因为异步同步的原因,这里等待让数据传过来再遍历。
                    this.$nextTick(() => {
                      item2.two.forEach((item3) => {
                        if (item3.id == item.settleId) {
                          if (money.data.length > 0) {
                            item3.settlePrice = item.settlePrice;
                            item3.judge = item.id;
                          }
                        }
                      });
                    });
                  }
                });
              });
            }
            console.log(data.data.list, "最后");
            this.boxList = data.data.list;

            this.loading = false;
          }
        }
        //  loading.close();
      } else if (this.userName == "用户") {
        param = {
          pageSize: 100,
          pageNum: 1,
          userId: this.userId,
        };
        console.log(param, "55");
        const userData = await proUserList(param);
        console.log(userData, "4");

        if (userData.code == 200) {
          userData.data.list.forEach(async (item, index) => {
            const getList = await getBasisList({ projectId: item.proId });
            console.log(getList, "555");
            if (getList.code == 200) {
              getList.data.forEach((item2) => {
                item2.judge = "新增";
                item2.settlePrice = 0;
              });
              item.two = getList.data;
              const money = await getDetails({
                templateId: this.$route.query.templateId - 0,
              });
              //
              console.log(money, "获取金额");
              if (money.code == 200) {
                if (money.data.length > 0) {
                  money.data.forEach((item) => {
                    userData.data.list.forEach((item2) => {
                      this.$nextTick(() => {
                        item2.two.forEach((item3) => {
                          if (item3.id == item.settleId) {
                            if (money.data.length > 0) {
                              item3.settlePrice = item.settlePrice;
                              item3.judge = item.id;
                            }
                          }
                        });
                      });
                    });
                  });
                }
              }
            }
          });
          console.log(userData.data.list, "最后");
          this.boxList = userData.data.list;
          this.loading = false;
        }
      } else {
        this.loading = false;
      }
    },
    //开启关闭佣金模板开关
    async isDefaultInput(row) {
      console.log(row, "66");

      // 0关闭1开启，如果是0就开启。
      let param = {
        templateId: this.$route.query.templateId - 0,
        projectId: row.projectId,
      };
      if (row.isLevel == 0) {
        row.isLevel = 1;
        const data = await enabledLevel(param);
        if (data.code == 200) {
          this.$message({
            message: "操作成功!",
            type: "success",
          });
        } else {
          row.isLevel = 0;
          this.$message.error(data.msg);
        }
      } else {
        row.isLevel = 0;
        const data = await disabledLevel(param);
        if (data.code == 200) {
          this.$message({
            message: "操作成功!",
            type: "success",
          });
        } else {
          row.isLevel = 1;
          this.$message.error(data.msg);
        }
      }
      // this.Template();
    },
    //关闭佣金模板后点击设置
    settlementMoneyeditButton(row) {
      this.$router.push({
        path: "/projectManagement/settlementMoney",
        query: {
          proId: row.projectId,
          templateId: this.$route.query.templateId,
        },
      });
    },
    //提交按钮
    async projectButton(item, item3) {
      console.log(item, "父亲");
      console.log(item3, "儿子");
      console.log(item3.cpaCommissionTemplateDetails.settlePrice.length)
      if(item3.cpaCommissionTemplateDetails.settlePrice.length === 0){

      }else{
          if (!item3.cpaCommissionTemplateDetails.id) {
        //新增金额
        let param = {
          projectId: item3.cpaProjectSettle.projectId, //项目id
          settleId: item3.cpaProjectSettle.id, //结算id
          settlePrice: item3.cpaCommissionTemplateDetails.settlePrice, //结算价格
          templateId: this.$route.query.templateId - 0, //项目模板中这个对象的id
        };
        const data = await addMoney(param);
        if (data.code == 200) {
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.Template();
        } else {
          this.$message.error("操作失败!");
        }
        console.log(data, "新增返回的值");
      } else {
        //修改金额
        let param = {
          id: item3.cpaCommissionTemplateDetails.id, //id
          projectId: item3.cpaProjectSettle.projectId, //项目id
          settleId: item3.cpaProjectSettle.id, //结算id
          settlePrice: item3.cpaCommissionTemplateDetails.settlePrice, //结算价格
          templateId: this.$route.query.templateId - 0, //项目模板中这个对象的id
        };
        const data = await modifyMoney(param);
        if (data.code == 200) {
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.Template();
        } else {
          this.$message.error("操作失败!");
        }
        console.log(data, "修改返回的值");
      }
      }
      
    },
    //提交按钮  废弃了
    async projectButton2(item, item3) {
      console.log(item, "父亲");
      console.log(item3, "儿子");
      if (item3.judge == "新增") {
        let param = {
          projectId: item3.projectId, //项目id
          settleId: item3.id, //结算id
          settlePrice: item3.settlePrice, //结算价格
          templateId: this.$route.query.templateId - 0, //项目模板中这个对象的id
        };
        const data = await addMoney(param);
        if (data.code == 200) {
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.getList();
        } else {
          this.$message.error("操作失败!");
        }
        console.log(data, "新增返回的值");
      } else {
        let param = {
          id: item3.judge, //id
          projectId: item3.projectId, //项目id
          settleId: item3.id, //结算id
          settlePrice: item3.settlePrice, //结算价格
          templateId: this.$route.query.templateId - 0, //项目模板中这个对象的id
        };
        const data = await modifyMoney(param);
        if (data.code == 200) {
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.getList();
        } else {
          this.$message.error("操作失败!");
        }
        console.log(data, "修改返回的值");
      }
    },
  },
  computed: {},
};
</script>
<style>
.el-scrollbar__wrap {
  overflow-x: hidden;
  /* margin-right: 150px; */
  /* overflow-y: hidden; */
}
</style>
<style scoped lang="scss">
// ::v-deep .el-form-item__label{
//   color: none;
// }
// 卡片文字开头
::v-deep .jsName .el-form-item__label{
  color: #B0B0B0;
}
.xhxBox_mini{
  border-bottom: 1px rgb(244, 243, 246) solid;
  height: 2px;
  width: 90%;
  margin: 0 auto;
}
//层级结算
.cjjsBox {
  // border: 1px red solid;
  height: 270px;
  width: 100%;
  display: flex;
  color: #bdbcbc;
  justify-content: center;
  align-items: center;
}
// 结算金额
.moneyBox {
  color: #4d7cf1;
}
.backgroundBox {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.topDiv {
  padding: 20px;
  height: auto;
  background: rgb(255, 255, 255);
  overflow: hidden;
  width: 98%;
  border-radius: 5px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
  .header {
    padding-bottom: 10px;
    border-bottom: 1px #eee solid;
  }
  .topDivMiniBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    height: auto;
    // border: 1px red solid;
    padding: 0px 10px;
  }
  .ddbox {
    padding: 20px 0px;
    margin: 10px 25px 10px 0px;
    overflow: hidden;
    // box-shadow: 0 1px 5px rgba(136, 136, 136, 0.3);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.13);
    width: 380px;
    // height: auto;
    height: 400px;
    border-radius: 10px;
    .nameBox {
      display: flex;
      // justify-content: center;
      justify-content: space-between;
      height: 70px;
      // border: 1px red solid;

      .txBox {
        height: 30px;

        border-radius: 5px;
        margin-right: 10px;
        // border:1px red solid;
      }
      span {
        //  border:1px red solid;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
       
      }
    }
    .xtys {
      width: 90%;
      margin: 0px auto;
      border-bottom: 1px rgb(244, 243, 246) solid;
    }
  }
}
.AlipayBox {
  justify-content: center;
  display: flex;
}
</style>
